<template>
  <div class="container">
    <!--  主题内容标题   -->
    <div class="flex contain-header">
      <div class="contain-title">资源管理</div>
      <div class="flex contain-left" @click="addCourseweare">
        <div><icon-svg name="iconadd-dashboard" class="nav-icon" /></div>
        <div class="add">新增</div>
      </div>
    </div>
    <!--  查询    -->
    <a-form class="form" :form="form">
      <a-row :gutter="24">
        <a-col
          :span="24"
          class="margin-bottom"
        >
          <div class="flex-center">
            <a-col :span="2">
              标题：
            </a-col>
            <a-col :span="6">
              <a-input placeholder="请输入标题" name="title"/>
            </a-col>
            <a-col :offset="1" :span="3">
              <a-button type="primary"  @click="search" icon="search" :style="{'background-color': '#54aef2',border: 'none'}">
                查询
              </a-button>
            </a-col>
          </div>
        </a-col>
      </a-row>
    </a-form>

    <!--  表格头部标签页  -->
    <div class="tag-page">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="资料">
          <a-table :columns="columns" :data-source="materialList" :pagination="materialPagination" bordered class="column">
            <template
                v-for="col in ['resourceDesc', 'resourceName', 'resourceTime','resourceUid']"
                slot-scope="text, record, index"
            >
              {{columns}}
              <div :key="index" class="column-content" slot="title" :title="text">
                {{ text }}
              </div>
            </template>
            <!--    表格视频封面操作列内容        -->
            <template slot="resourceImage" slot-scope="text, record, index">
              <div class="img-con">
                <img :src="'http://zctuchuang.oss-cn-shenzhen.aliyuncs.com/'+record.resourceImage" alt="" class="img">
              </div>
            </template>
            <!--    表格操作列内容        -->
            <template slot="operation" slot-scope="text, record, index">
              <div class="editable-row-operations">
               <span class="oper">
                 <div class="flex icon-flex">
<!--                    <a @click="() => editDev(record,text)" class="flex edit"><icon-svg name="iconbianji" class="icon-oper" />编辑</a>-->
                    <a-popconfirm title="是否确定删除?" cancelText="取消" okText="确定" @confirm="() => deleteResourse(record)">
                      <a class="flex delete"><icon-svg name="iconshanchu" class="icon-oper" />删除</a>
                    </a-popconfirm>
                 </div>
                </span>
              </div>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="课件" force-render>
          <a-table :columns="columns" :data-source="coursewareList" :pagination="coursewarePagination" bordered class="column">
            <template
                v-for="col in ['resourceDesc', 'resourceName', 'resourceTime','resourceUid']"
                slot-scope="text, record, index"
            >
              {{columns}}
              <div :key="index" class="column-content" slot="title" :title="text">
                {{ text }}
              </div>
            </template>
            <!--    表格视频封面操作列内容        -->
            <template slot="resourceImage" slot-scope="text, record, index">
              <div class="img-con">
                <img :src="'http://zctuchuang.oss-cn-shenzhen.aliyuncs.com/'+record.resourceImage" alt="" class="img">
              </div>
            </template>
            <!--    表格操作列内容        -->
            <template slot="operation" slot-scope="text, record, index">
              <div class="editable-row-operations">
               <span class="oper">
                 <div class="flex icon-flex">
<!--                    <a @click="() => editDev(record,text)" class="flex edit"><icon-svg name="iconbianji" class="icon-oper" />编辑</a>-->
                    <a-popconfirm title="是否确定删除?" cancelText="取消" okText="确定" @confirm="() => deleteResourse(record)">
                      <a class="flex delete"><icon-svg name="iconshanchu" class="icon-oper" />删除</a>
                    </a-popconfirm>
                 </div>
                </span>
              </div>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="3" tab="软件">
          <a-table :columns="columns" :data-source="softwareList" :pagination="softwarePagination" bordered class="column">

            <!--    表格视频封面操作列内容        -->
            <template slot="resourceImage" slot-scope="text, record, index">
              <div class="img-con">
                <img :src="'http://zctuchuang.oss-cn-shenzhen.aliyuncs.com/'+record.resourceImage" alt="" class="img">
              </div>
            </template>
            <template slot="status" slot-scope="text, record, index">
              审核未通过
            </template>
            <!--    表格操作列内容        -->
            <template slot="operation" slot-scope="text, record, index">
              <div class="editable-row-operations">
               <span class="oper">
                 <div class="flex icon-flex">
<!--                    <a @click="() => editDev(record,text)" class="flex edit"><icon-svg name="iconbianji" class="icon-oper" />编辑</a>-->
                    <a-popconfirm title="是否确定删除?" cancelText="取消" okText="确定" @confirm="() => deleteResourse(record)">
                      <a class="flex delete"><icon-svg name="iconshanchu" class="icon-oper" />删除</a>
                    </a-popconfirm>
                 </div>
                </span>
              </div>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!--  新增弹窗  -->
<!--    <action-modal :modalVisible.sync="isShowModal" :data.sync="modalData" :title="modalTitle"></action-modal>-->
  </div>
</template>

<script>
// import ActionModal from "../../components/Modal/ActionModal";
import {getResourseList, deleteResourses} from "@/api";
const columns = [
  {
    title: '标题',
    dataIndex: 'resourceName',
    width: '25%',
    ellipsis: true,
    align: 'center',
    scopedSlots: { customRender: 'resourceName' },
  },
  {
    title: '封面图',
    dataIndex: 'resourceImage',
    width: '16%',
    ellipsis: true,
    align: 'center',
    scopedSlots: { customRender: 'resourceImage' },
  },
  {
    title: '发布人',
    dataIndex: 'resourceUid',
    width: '15%',
    ellipsis: true,
    align: 'center',
    scopedSlots: { customRender: 'resourceUid' },
  },
  {
    title: '描述',
    dataIndex: 'resourceDesc',
    width: '20%',
    ellipsis: true,
    align: 'center',
    scopedSlots: { customRender: 'resourceDesc' },
  },
  {
    title: '上传时间',
    dataIndex: 'resourceTime',
    width: '14%',
    ellipsis: true,
    align: 'center',
    scopedSlots: { customRender: 'resourceTime' },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    align: 'center',
    scopedSlots: { customRender: 'operation' },
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i.toString(),
    title: `计算机应用管理 ${i}`,
    vedio: `机台 ${i}`,
    courseware: `计算机.pdf${i}`,
    presenter: `李莉${i}`,
    profession: `计算机 ${i}`,
    time: `2020-12-26 14:00:${i}`,
    publisher: `Elaine`,
    evaluation: `是`,
    status: `审核通过`,
    description: '我是描述我是我是描述我是我是描述我是我是描述我是我是描述我是我是描述我是'
  });
}
export default {
  name: "UploadRecords",
  data() {
    return{
      label: [
        {
          title: '标题',
          placeholder: '请输入标题',
          name: 'c_name'
        }
      ],
      form: this.$form.createForm(this, { name: 'advanced_search' }),
      data,
      columns,
      materialPagination: {
        total: 100,
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        onChange:(page,pageSize)=>this.getMaterialsList(page,pageSize),//点击页码事件
      },
      coursewarePagination: {
        total: 100,
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        onChange:(page,pageSize)=>this.getCoursewaresList(page,pageSize),//点击页码事件
      },
      softwarePagination: {
        total: 100,
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        onChange:(page,pageSize)=>this.getSoftwaresList(page,pageSize),//点击页码事件
      },
      coursewareList: [],
      softwareList: [],
      materialList: [],
      pagination:{
        total:0,
        defaultPageSize:10,
        showTotal: total => `共 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger:true,
        pageSizeOptions: ['5', '10', '15', '20'],
      },
      isShowModal: false,
      modalTitle: '',
      modalData: [],
    }
  },
  components: {
    // ActionModal
  },
  computed: {
    rowSelection() {
      return {
        // onChange: (selectedRowKeys, selectedRows) => {
        //   console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        // },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },
  created() {
    //帖子分页查询
    // this.getPostsList()
    //获取资料列表
    this.getMaterialsList()
    //获取课件列表
    this.getCoursewaresList()
    //获取软件列表
    this.getSoftwaresList()
  },
  methods: {
    //条件查询列表
    //表单查询
    handleSearch(e) {
      e.preventDefault()
      //获取资料列表
      this.getMaterialsList()
      //获取课件列表
      this.getCoursewaresList()
      //获取软件列表
      this.getSoftwaresList()
    },
    //时间
    onChange(dates, dateStrings) {
      console.log('From: ', dates[0], ', to: ', dates[1]);
      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
    },
    //获取资料列表
    getMaterialsList(pageNum=1, pageSize=20){
      this.isLoading = true
      let params = {
        pageNum: pageNum,
        pageSize: pageSize,
        categoryId: 1,
        userName: window.localStorage.getItem('userName'),
        resourceName: this.modalTitle
      }
      getResourseList(params)
          .then((res) => {
            if (res.status == 200){
              this.materialList = res.data.list
              this.materialPagination.total = res.data.total
              this.isLoading = false
            }
            else{
              this.$message.info(res.msg)
            }
          })
    },
    //获取课件列表
    getCoursewaresList(pageNum=1, pageSize=20){
      this.isFanLoading = true
      let params = {
        pageNum: pageNum,
        pageSize: pageSize,
        categoryId: 2,
        userName: window.localStorage.getItem('userName'),
        resourceName: this.modalTitle
      }
      getResourseList(params)
          .then((res) => {
            if (res.status == 200){
              this.coursewareList = res.data.list
              this.coursewarePagination.total = res.data.total
              this.isFanLoading = false
            }
            else{
              this.$message.info(res.msg)
            }
          })
    },
    //获取软件列表
    getSoftwaresList(pageNum=1, pageSize=20){
      this.isFanLoading = true
      let params = {
        pageNum: pageNum,
        pageSize: pageSize,
        categoryId: 3,
        userName: window.localStorage.getItem('userName'),
        resourceName: this.modalTitle
      }
      getResourseList(params)
        .then((res) => {
          if (res.status == 200){
            this.softwareList = res.data.list
            this.softwarePagination.total = res.data.total
            this.isFanLoading = false
          }
          else{
            this.$message.info(res.msg)
          }
        })
    },
    //删除资源
    deleteResourse(item) {
      let params = {
        resourceId: item.resourceId,
        userName: window.localStorage.getItem('userName')
      }
      deleteResourses(params)
        .then((res) => {
          if (res.status == 200){
            this.$message.success('删除资源成功！')
            this.getPostsList()
          }
          else{
            this.$message.info(res.msg)
          }
        })
    },
    //添加资源
    addCourseweare() {
      this.$router.push('/upload')
    }
    // //新增课件
    // addCourseweare(){
    //   this.isShowModal = true
    //   this.modalTitle = '发布课件'
    //   let data = [
    //     {
    //       label: '类型',
    //       name: 'eWorkshop'
    //     },
    //     {
    //       label: '标题',
    //       name: 'eMachine'
    //     },
    //     {
    //       label: '主讲人',
    //       name: 'eName'
    //     },
    //     {
    //       label: '专业',
    //       name: 'eCode'
    //     },
    //     {
    //       label: '封面',
    //       name: 'eType'
    //     },
    //     {
    //       label: '课件上传',
    //       name: 'eType'
    //     },
    //     {
    //       label: '评价',
    //       name: 'eType'
    //     },
    //   ]
    //   this.modalData.createData = data
    // }
  }
}
</script>

<style scoped>
.flex{
  display: flex;
  flex-direction: row;
}
.container{
  width: 1032px;
  height: 100%;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #eeeeee;
  padding: 5px 13px;
}
.contain-header{
  justify-content: space-between;
  align-items: center;
}
.contain-title{
  font-family: MicrosoftYaHei;
  font-size: 18px;
  font-weight: bold;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #1bcbb4;
}
.contain-left{
  align-items: center;
  cursor: pointer;
}
.add{
  font-family: MicrosoftYaHei;
  font-size: 14px;
  font-weight: bold;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #54aef2;
  margin-left: 9px;
}
.nav-icon{
  color: #54aef2;
}
.form{
  margin-top: 15px;
}
.tag-page{
  margin-top: 40px;
  text-align: left;
}
.column{
  background-color: #ffffff;
}
.icon-oper{
  font-size: 5px;
  margin-right: 6px;
  margin-left: 10px;
}
.edit{
  color: #12c5f8;
}
.delete{
  color: #f8334f;
}
.shield{
  color: #e8c25b;
}
.disable{
  color: #f733a2;
}
.space-icon{
  margin-top: 10px;
}
.icon-flex{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.img-con{
  width: 100%;
}
.img{
  width: 80%;
  /*height: 57px;*/
}
</style>
